@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh" >
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron">
                <div class="bg-fff mui-chaxun">
                    <div class="mui-fenlei mui-text-center flex ">
                        @foreach(config('shop.zone') as $key=>$title)
                            <div class="flex-item {{$key == $zone ?'swiper-slide-actives':''}}"
                                 data-url = "{{route('f_Wap_Cart_index',['zone'=>$key])}}"
                            >{{$title}}</div>
                        @endforeach
                    </div>
                </div>

                <div class="mui-content">
                    <!-- 有数据 -->
                    @if($cart_goods->isNotEmpty())
                        <form method="post" action="{{route('f_Wap_Order_buyCart',['zone'=>$zone])}}" id="cart-buy">
                            {{csrf_field()}}
                            <ul class="mui-table-view">
                                @foreach($cart_goods as $key=>$item)
                                    <li class="mui-table-view-cell mui-media BoxItem" data-index="{{$key+1}}">

                                        <div class='mui-slider-handle'>
                                            <div class="mui-clearfix" style="padding: 10px 10px 0 0;">
                                                <a data-url="{{route('f_Wap_Cart_delete',['cart_id'=>$item->id])}}" class="mui-pull-right cart-del">
                                                    <img src="{{asset(config('mall.wap_assets1').'/images/shanchu.png')}}" alt="" width='20'>
                                                </a>
                                            </div>
                                            <div class="BoxItemBottom flex">
                                                <div class="BoxItemBottomLeft">
                                                    <div class="mui-checkbox">
                                                        <input name="cart_id[]" class="check-item" value="{{$item->id}}" type="checkbox" >
                                                    </div>
                                                </div>
                                                <div class="BoxItemBottomRight flex" style="width: 100%;">
                                                    <img class="BoxItemBottomRightImg" src="{{str_first($item->goods->goods_images)}}" />
                                                    <div class="BoxItemBottomRightDetails" style="width: 100%;">
                                                        <div class="BoxItemBottomRightDetailsName mui-ellipsis-2">{{substr($item->goods->goods_name,0,20)}}</div>
                                                        @if($item->spec_item)
                                                        <div class="BoxItemBottomRightDetailsName  shuxing" style="margin-top: 0;">
                                                             <span>
                                                                {{$item->spec_item}}
                                                           </span>
                                                        </div>
                                                        @endif
                                                        <div class="BoxItemBottomRightDetailsGuige">
                                                            <a href="javascript:;" class="BoxItemBottomRightDetailsMoney cart_price{{$item->id}}" style="font-size: 12px">
                                                                ￥{{$item->price}}
                                                            </a>
                                                            <em style="font-size: 16px;margin-left: 10px" ><i style="font-size: 12px;">x&nbsp;</i><b class="cart_num{{$item->id}}">{{$item->num}}</b></em>
                                                            <div class="mui-pull-left" >
                                                                <i style="font-size: 12px">小计</i>:<b class="color1 total_price{{$item->id}}" style="font-size: 12px">{{$item->total_price}}</b>
                                                            </div>
                                                        </div>

                                                        <div class="BoxItemBottomRightDetailsPrice">
                                                            <a href="javascript:;" class="mui-pull-right btn_add">+</a>
                                                            <input class="mui-pull-right txt_Num" name="number" type="number" value="{{$item->num}}"
                                                                   data-cart_id ="{{$item->id}}" data-action="{{route('f_Wap_Cart_update',['cart_id'=>$item->id])}}"
                                                            >
                                                            <a href="javascript:;" class="mui-pull-right btn_jian">-</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach

                            </ul>
                        </form>
                    @else
                        <div style="height: 110px;"></div>
                        <div class="mui-text-center">
                            <img src="{{asset(config('view.frontend.wap_login').'/images/tu51.png')}}" alt="" width="240">
                            <p><a href="{{route('f_Wap_Goods_goodsList')}}" style="color: #fff;border: 1px solid #5a92fd;padding: 8px 24px;border-radius: 16px;background: #5a92fd;">去购物</a></p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @if($cart_goods->isNotEmpty())
        <div class="footer">
            <div class="footer-left">
                <div class="mui-input-row mui-checkbox">
                    <input name="checkbox1" class="check-all" value="" type="checkbox">
                    <label>全选</label>
                </div>
            </div>

            <div class="footer-center">
                <div class="footer-center-top" style="    line-height: 30px;height: 33px;">
                    <a href="javascript:;" class="footer-center-top-left" style="line-height: 33px;">合计:</a>
                    <a href="javascript:;" class="footer-center-top-right"  style="line-height: 33px;">￥0</a>
                </div>
            </div>

            <a href="javascript:;" id="gotoCalc" class="footer-right">结算
                <span  class="count">&nbsp;(0)</span>
            </a>
        </div>
    @endif
    @include('WShop::public.foot_bar',['active'=>'cart'])
@endsection
@push('scripts')
    <script type="text/javascript" charset="utf-8">
        //数量变更
        mui(".BoxItemBottomRightDetailsPrice").on("tap", ".btn_jian", function() {
            if($(this).prev()[0].value == 1) {
                mui.toast("不能再减少啦~");
                return;
            } else {
                $(this).prev()[0].value = parseInt($(this).prev()[0].value) - 1;
            }
            CalcMoney();
            asyncNum($(this).prev())
        }).on("tap", ".btn_add", function() {
            $(this).next()[0].value = parseInt($(this).next()[0].value) + 1;
            CalcMoney();
            asyncNum($(this).next())
        });

        function asyncNum(obj) {
            var cart_id = $(obj).data('cart_id');
            var num = $(obj).val();
            var url = $(obj).data('action');
            new shopAjax({
                url:url,
                data:{
                    number:num,
                    _token:$('meta[name="csrf-token"]').attr('content')
                },
                callback:function (response) {
                  $(".BoxItemBottom .cart_num"+cart_id).html(num)
                  var total_price = 0 ;
                  var price = $('.BoxItemBottom').find('.cart_price'+cart_id).html().split("￥")[1];
                    total_price = parseFloat(price) * num ;
                    $(".BoxItemBottom .total_price"+cart_id).html(total_price)
                }
            }).ajax();
        }

        $('input[type="checkbox"]').each(function () {
            $(this). on('click',function () {
                var parentElem = $(this).parents('body');

                if ($(this).hasClass('check-all')) {
                    parentElem.find("input.check-item,input.check-all").prop("checked", this.checked);
                } else {
                    if (!this.checked) {
                        parentElem.find(".check-all").prop("checked", false);
                    } else {
                        var preElem = parentElem.find("input.check-item");
                        var checked = true;
                        preElem.each(function () {
                            if (!this.checked) {
                                checked = false;
                            }
                        });
                        parentElem.find("input.check-all").prop("checked", checked);
                    }
                }
                CalcMoney();
            });
        });
        //计算总价及总个数
        function CalcMoney() {
            var count = 0;
            var money = 0;
            mui("input.check-item").each(function() {
                if(this.checked) {
                    var value =  $(this).val();
                    count++;
                    var price = $(this).parents('.BoxItemBottom').find('.BoxItemBottomRightDetailsMoney').html().split("￥")[1];
                    var num = $(this).parents('.BoxItemBottom').find('input[name="number"]').val();
                    money += parseFloat(price) * num;
                }
                //去结算个数
                $(".count").html("&nbsp(" + count + ")");
                //合计
                $(".footer-center-top-right").html("￥" + money)

            })
        }
        mui(".mui-slider-handle").on("tap", ".cart-del", function(e) {
            e.stopPropagation();
            var url = $(this).data('url');
            mui.confirm('确定删除此商品？','提示',function(e){
                if(e.index==1){
                    new shopAjax({
                        'method':'get',
                        'url':url,
                        callback:function (response) {
                            window.location.reload();
                        }
                    }).ajax();
                }
            });
        });
        mui(".footer").on("tap", "#gotoCalc", function(e) {
            e.stopPropagation();
            isCheck = $('#cart-buy input:checked.check-item').length;
            if(isCheck<1){
                mui.toast('请选择购买产品');
                return false;
            }
            $('#cart-buy').submit();
        });
    </script>
    <script>
        $('.mui-fenlei .flex-item').each(function () {
            $(this).off('tap').on('tap',function () {
                window.location.href =  $(this).data('url');
            });
        });
    </script>
@endpush